<template>
  <el-dialog title="配置选项" :visible.sync="dialogFormVisible" append-to-body>
    <el-tabs v-model="activeName">
      <!-- 这里是物理接口 -->
      <el-tab-pane label="物理网口配置" name="first">
        <el-form ref="physicalInterfaces" label-width="120px" label-position="left">
          <el-form-item label="接口名称">
            <el-input v-model="physicalInterfaces.interfaceName" class="adjustInp" :disabled="true"
                      vlaue="1"></el-input>
          </el-form-item>
          <el-form-item label="描述">
            <el-input class="adjustInp"></el-input>
            <span>（0~255个字）</span>
          </el-form-item>
          <el-form-item label="链路工作模式">
            <el-select placeholder="请选择链路工作模式" class="adjustInp">
              <el-option v-for="item in linkwork" :key="item.value" :label="item.label" :value="item.value"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="链路速度">
            <el-select placeholder="请选择链路速度" class="adjustInp" v-model="link.speed">
              <el-option label="快速" value="fast"></el-option>
              <el-option label="适中" value="common"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="工作模式">
            <el-select placeholder="请选择工作模式" class="adjustInp" @change="changeTwo"
                       v-model="physicalInterfaces.operatingMode">
              <el-option label="路由模式" :value=0></el-option>
              <el-option label="透明模式" :value=1></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="VLAN封装标准">
            <el-select placeholder="请选择封装标准" class="adjustInp" v-model="link.worktype">
              <el-option label="标准一" value="standardOne"></el-option>
              <el-option label="标准二" value="standardTwo"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="IP地址获取">
            <el-select placeholder="请选择地址获取" class="adjustInp" v-model="physicalInterfaces.ipobtainMode">
              <el-option label="通过DHCP获得" :value="0"></el-option>
              <el-option label="静态配置" :value="1"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="IP地址">
            <el-input class="adjustInp" v-model="ipaddress"></el-input>
          </el-form-item>
          <el-form-item label="掩码">
            <el-input class="adjustInp" v-model="ipMask"></el-input>
          </el-form-item>
          <el-form-item label="授权选择">
            <el-checkbox-group @change="enableFlagValuefn">
              <el-checkbox label="允许管理" name="type"></el-checkbox>
              <el-checkbox label="允许ping" name="type"></el-checkbox>
              <el-checkbox label="允许traceroute" name="type"></el-checkbox>
              <el-checkbox label="启用" name="type" :value=1></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 这里是 桥接口-->
      <el-tab-pane label="桥接口配置" name="second" :disabled="flagBridge">
        <el-form ref="bridgeInterfaceConfiguration1.bridgeInterfaces"
                 :model="bridgeInterfaceConfiguration1.bridgeInterfaces" label-width="120px" label-position="left">
          <el-form-item label="桥接口名称">
            <el-select placeholder="请选择桥接口名称" class="adjustInp" v-model="bridgeInterfaceConfiguration1.interfaceName">
              <el-option label="名称一" value="brg1"></el-option>
              <el-option label="名称二" value="brg2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="描述">
            <!-- <el-input class="adjustInp" v-model="bridgeInterfaceConfiguration1.describe"></el-input> -->
            <el-input class="adjustInp"></el-input>

            <span>（0~255个字）</span>
          </el-form-item>
          <el-form-item label="IP地址">
            <!-- <el-input class="adjustInp" v-model="bridgeInterfaceConfiguration1.destinationAddress"></el-input> -->
            <el-input class="adjustInp"></el-input>

          </el-form-item>
          <el-form-item label="掩码">
            <!-- <el-select placeholder="请选择掩码" class="adjustInp" v-model="bridgeInterfaceConfiguration1.mask">
                            <el-option label="掩码一" value="codeOne"></el-option>
                            <el-option label="掩码二" value="codeTwo"></el-option>
                        </el-select> -->
            <el-select placeholder="请选择掩码" class="adjustInp">
              <el-option label="掩码一" value="codeOne"></el-option>
              <el-option label="掩码二" value="codeTwo"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="授权选择">
            <el-checkbox-group v-model="bridgeEnableFlag" @change="bridgeCheck">
              <el-checkbox label="允许管理" name="type"></el-checkbox>
              <el-checkbox label="允许ping" name="type"></el-checkbox>
              <el-checkbox label="允许traceroute" name="type"></el-checkbox>
              <el-checkbox label="启用" name="type"></el-checkbox>
            </el-checkbox-group>
          </el-form-item>
          <el-form-item label="绑定接口选择">
            <el-transfer
              :titles="['可选接口列表','绑定接口列表']"
              v-model="bridgeInterfaceConfiguration1.bindInterfaces[0].interfaceName"
              :data="transferList">
            </el-transfer>
          </el-form-item>
        </el-form>
      </el-tab-pane>
      <!-- 这里是路由-->
      <el-tab-pane label="路由配置" name="third" :disabled="disableRouter">
        <el-form ref="router" label-width="120px" label-position="left">
          <el-form-item label="目的地址">
            <el-input class="adjustInp" v-model="routingConfigurations[0].destinationAddress"></el-input>
          </el-form-item>
          <el-form-item label="掩码">
            <el-select placeholder="请选择掩码" class="adjustInp" v-model="routingConfigurations[0].mask">
              <el-option label="掩码一" value="codeOne"></el-option>
              <el-option label="掩码二" value="codeTwo"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="优先级">
            <el-input class="adjustInp" v-model.number="routingConfigurations[0].priority"></el-input>
            <span>（1~9999）</span>
          </el-form-item>
        </el-form>
        <p align="right">
          <el-button type="primary" size="mini">添 加</el-button>
        </p>
        <table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
          <thead>
          <th>下一跳</th>
          <th>流出网口</th>
          <th>权重（1-255）</th>
          <th>IP探测</th>
          <th>操作</th>
          </thead>
          <tbody>
          <tr v-for="(i,n) in router.tabList" :key="n">
            <td>
              <input class="tabInner" v-model="routingConfigurations[0].nextHop">
            </td>
            <td>
              <select placeholder="请选择网口" class="tabInner" v-model="routingConfigurations[0].outflowInterface">
                <option label="eth1(eth1)" value="eth1"></option>
                <option label="eth2(eth2)" value="eth2"></option>
              </select>
            </td>
            <td>
              <input class="tabInner" v-model.number='routingConfigurations[0].weights'>
            </td>
            <td>
              <select class="tabInner" v-model="router.ipProbe">
                <option label="空" value="null"></option>
                <option label="非空" value="goods"></option>
              </select>
            </td>
            <td>
              <i class="el-icon-delete"></i>
            </td>
          </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <!-- 这里是地址 -->
      <el-tab-pane label="地址列表配置" name="fourth">
        <el-form ref="addressLists" label-width="120px" label-position="left">
          <el-form-item label="名称">
            <el-input class="adjustInp" style="width: 200px;" v-model="addressLists[0].name"></el-input>
            <span>(1-32个字母、数字、点、减号、中文、下划线组合)</span>
          </el-form-item>
          <el-form-item label="核心资产">
            <!-- <el-switch v-model="addressLists.coreAssets"></el-switch> -->
            <el-switch></el-switch>

          </el-form-item>
          <el-form-item label="备注">
            <!-- <el-input class="adjustInp"></el-input>
                        <span>(0-255个字符)</span> -->
            <el-input class="adjustInp"></el-input>
            <span>(0-255个字符)</span>
          </el-form-item>
          <el-form-item label="地址">
            <el-col :span="8">
              <el-input style="width: 200px;" v-model='addressAddress'></el-input>
            </el-col>
            <el-col :span="1" align="center"> /</el-col>
            <el-col :span="8">
              <el-select placeholder="" v-model="addressAddressType">
                <el-option label="255.255.255" value="255.255.255"></el-option>
                <el-option label="1.1.1.1" value="1.1.1.1"></el-option>
              </el-select>
            </el-col>
          </el-form-item>
        </el-form>
        <p align="right">
          <el-button type="primary" size="mini">添 加</el-button>
        </p>
        <table border="1" style="border-collapse: collapse;width: 100%;text-align: center;">
          <thead>
          <th>地址</th>
          <th>排除地址</th>
          <th>操作</th>
          </thead>
          <tbody>
          <tr v-for="(i,n) in router.tabList" :key="n">
            <td>
              <input class="tabInner">
            </td>
            <td>
              <input class="tabInner">
            </td>
            <td>
              <i class="el-icon-delete"></i>
            </td>
          </tr>
          </tbody>
        </table>
      </el-tab-pane>
      <!-- 这里是安全策略 -->
      <el-tab-pane label="安全策略配置" name="five">
        <el-form :inline="true" :model="securityStrategy" label-width="90px" label-position="left">
          <el-col :span="12">
            <el-form-item label="规则名">
              <el-input v-model="strategyList[0].strategyName"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="序号">
              <el-input v-model.number="strategyList[0].serialNumber"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="源地址">
              <el-select v-model="strategyList[0].sourceAddress">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="目的地址">
              <el-select v-model="strategyList[0].destinationAddress">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="源端口">
              <el-input v-model.number="strategyList[0].sourcePort"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="时间调度">
              <el-select>
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="源MAC">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="服务">
              <el-select v-model="strategyList[0].service">
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流入安全域">
              <el-select>
                <el-option label="区域三" value="SH"></el-option>
                <el-option label="区域四" value="BJ"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="流出安全域">
              <el-select>
                <el-option label="区域五" value="SH1"></el-option>
                <el-option label="区域六" value="SH2"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="策略组">
              <el-select>
                <el-option label="区域一" value="shanghai"></el-option>
                <el-option label="区域二" value="beijing"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label="备注">
              <el-input></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <p class="titileBar">认证用户/用户组</p>
            <el-form-item label=" 用户/用户组">
              <el-select v-model="securityStrategy.userGroup" placeholder="请选择">
                <el-option-group
                  v-for="group in options3"
                  :key="group.label"
                  :label="group.label"
                  value="group.value"
                >
                  <el-option
                    v-for="item in group.options"
                    :key="item.value"
                    :label="item.label"
                    value="item.value">
                  </el-option>
                </el-option-group>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <p class="titileBar">访问控制</p>
            <el-col :span="12">
              <el-radio v-model.number="strategyList[0].accessControl" label="1">允许</el-radio>
              <el-radio v-model.number="strategyList[0].accessControl" label="2">禁止</el-radio>
            </el-col>
            <el-col :span="12">
              <el-checkbox v-model="strategyList[0].logFlag" :true-label="0" :false-label="1">记录日志</el-checkbox>
            </el-col>
          </el-col>
          <el-col :span="24">
            <p class="titileBar">防护策略</p>
            <el-col :span="16">
              <el-form-item label="入侵防护策略" label-width="120px" v-model="strategyList[0].intrusionPreventionStrategy">
                <el-select>
                  <el-option label="标准入侵防护模板" value="0"></el-option>
                  <el-option label="入侵防护阻断模板" value="1"></el-option>
                  <el-option label="入侵防护监测模板" value="2"></el-option>
                  <el-option label="LINUX环境入侵防护模板" value="3"></el-option>
                  <el-option label="WINDOWS环境入侵防护模板" value="4"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="mini" type="primary">查看策略信息</el-button>
            </el-col>
            <el-col :span="16">
              <el-form-item label="数据防泄漏策略" label-width="120px">
                <el-select>
                  <el-option label="策略一" value="strategyOne"></el-option>
                  <el-option label="策略二" value="strategytwo"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="mini" type="primary">查看策略信息</el-button>
            </el-col>
            <el-col :span="16">
              <el-form-item label="垃圾邮件过滤" label-width="120px">
                <el-select>
                  <el-option label="策略一" value="strategyOne"></el-option>
                  <el-option label="策略二" value="strategytwo"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-col>
          <el-col :span="24">
            <p class="titileBar">流量控制策略</p>
            <el-col :span="16">
              <el-form-item label="流量通道" label-width="120px">
                <el-select>
                  <el-option label="策略一" value="strategyOne"></el-option>
                  <el-option label="策略二" value="strategytwo"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="mini" type="primary">查看策略信息</el-button>
            </el-col>
            <el-col :span="16">
              <el-form-item label="连接限制策略" label-width="120px">
                <el-select>
                  <el-option label="策略一" value="strategyOne"></el-option>
                  <el-option label="策略二" value="strategytwo"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-button size="mini" type="primary">查看策略信息</el-button>
            </el-col>
          </el-col>
          <el-col :span="24">
            <p class="titileBar">其他配置</p>
            <el-form-item label="长连接">
              <el-input style="width:300px;"></el-input>
              <span>分钟 (30 - 288000分钟，0代表未启用)</span>
            </el-form-item>
          </el-col>
        </el-form>
      </el-tab-pane>
    </el-tabs>
    <div slot="footer" class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="surBtn(socFlag)">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    export default {
        data() {
            const generateData = () => {
                const data = []
                for (let i = 1; i <= 15; i++) {
                    data.push({
                        key: i,
                        label: `备选项${i}`,
                        disabled: i % 4 === 0
                    })
                }
                return data
            }
            return {
                activeName: 'first', // TAS选项默认第一个
                dialogFormVisible: false, // 弹出框开关
                flagBridge: false,
                flagBut: false,
                disableRouter: false,
                socFlag: 0,
                firewall: {}, // 防火墙数据
                transferList: generateData(),
                options3: [
                    {
                        label: '一类分组',
                        value: '10',
                        options: [
                            {
                                value: '101',
                                label: '分组一'
                            },
                            {
                                value: '102',
                                label: '分组二'
                            }
                        ]
                    },
                    {
                        label: '二类分组',
                        value: '20',
                        options: [
                            {
                                value: '201',
                                label: '分组一'
                            },
                            {
                                value: '201',
                                label: '分组二'
                            }
                        ]
                    }
                ],
                // 第一部分
                ipaddress: '',
                ipMask: '',
                enableFlagValue: ['启用'],
                physicalInterfaces: { // 物理网口配置
                    interfaceName: '', // 接口名称
                    // interfacedescribe:'',//描述
                    enableFlag: 1, // checkbox组
                    operatingMode: '', // 工作模式
                    // obtainmode:'', // 地址获取
                    ipobtainMode: '', // ip地址获取
                    ipaddressAndMask: ''
                },
                linkwork: [
                    {
                        value: 'luyou',
                        label: '路由'
                    },
                    {
                        value: 'setting',
                        label: '透明'
                    }
                ],
                link: {
                    speed: '', // 链路速度
                    worktype: '', // VLAN封装标准
                    priority: ''
                },
                // 第二部分
                bridgeEnableFlag: ['启用'],
                bridgeInterfaceConfiguration1: {
                    bindInterfaces: [
                        {
                            interfaceName: ''
                        }
                    ],
                    interfaceName: '', // 网桥接口名称
                    enableFlag: '1'
                },
                routingConfigurations: [
                    {
                        destinationAddress: '', // ip地址
                        outflowInterface: '',
                        weights: '', // 权重
                        mask: '', // 掩码
                        nextHop: '', // 吓一跳
                        // routingConfigurations:'',//流出网口
                        priority: '', // 优先级
                    }
                ],
                router: {
                    tabList: [{}]
                },
                //第四部分
                addressAddress: '',
                addressAddressType: '',
                addressLists: [
                    {
                        ipAddress: '',
                        name: ''
                    }
                ],
                //第五部分
                strategyList: [
                    {
                        accessControl: '',
                        destinationAddress: '', // 目的地址列表
                        intrusionPreventionStrategy: 0,
                        logFlag: 0,
                        serialNumber: '', // 代表策略优先级
                        service: '', // 服务类型
                        sourceAddress: '', // 源地址列表
                        sourcePort: '', // 源端口
                        strategyName: '' // 策略名称
                    }
                ],
                securityStrategy: {
                    userGroup: null,
                    radio: '1',
                    checked: false,
                    // logFlag:0,
                },
            }
        },
        methods: {
            firewallShow(val) {
                this.dialogFormVisible = true
                this.socFlag = val
            },
            changeTwo(value) {
                if (value == 0) {
                    this.flagBridge = true
                } else if (value == 1) {
                    this.disableRouter = true
                }
            },
            enableFlagValuefn() {
                if (this.enableFlagValue == "启用") {
                    this.physicalInterfaces.enableFlag = 1
                }
            },
            bridgeCheck() {
                if (this.bridgeEnableFlag == "启用") {
                    this.bridgeInterfaceConfiguration1.enableFlag = 1
                }
            },
            surBtn(val) {
                this.dialogFormVisible = false
                this.physicalInterfaces.ipaddressAndMask = this.ipaddress + "/" + this.ipMask
                this.addressLists[0].ipAddress = this.addressAddress + "/" + this.addressAddressType
                this.firewall = {
                    physicalInterfaces: this.physicalInterfaces,
                    bridgeInterfaceConfiguration1: this.bridgeInterfaceConfiguration1,
                    firewallName: "test",
                    fwType: 0,
                    interfaceTraffic: 90,
                    routingConfigurations: this.routingConfigurations,
                    addressLists: this.addressLists,
                    strategyList: this.strategyList
                }
                this.$emit('firewallData', val, this.firewall, 'fhq')
            }
        },
        mounted() {
        }
    }
</script>

<style>

</style>
